<template>
	<div class="employee-table">
		<el-table v-loading="loading" :data="data" style="width: 100%" border stripe>
			<el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" />
			<el-table-column label="操作" width="200" align="center">
				<template #default="{ row }">
					<el-button type="primary" size="small" :icon="Edit" @click="handleEdit(row.id)">
						编辑
					</el-button>
					<el-button type="danger" size="small" :icon="Delete" @click="handleDelete(row.id)" style="margin-left: 10px;">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagination" style="margin-top: 10px; text-align: right;">
			<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20, 50]" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper" />
		</div>
	</div>
</template>

<script setup>
import { Edit, Delete } from '@element-plus/icons-vue';
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
	columns: { type: Array, required: true },
	data: { type: Array, required: true },
	loading: { type: Boolean, default: false },
	total: { type: Number, required: true },
	currentPage: { type: Number, default: 1 },
	pageSize: { type: Number, default: 10 }
})

const emit = defineEmits(['edit', 'delete', 'page-change'])

const handleEdit = (id) => emit('edit', id)
const handleDelete = (id) => emit('delete', id)
const handleSizeChange = (size) => emit('page-change', { currentPage: props.currentPage, pageSize: size })
const handleCurrentChange = (page) => emit('page-change', { currentPage: page, pageSize: props.pageSize })
</script>

<style scoped>
.pagination {
	margin-top: 16px;
	text-align: right;
}
</style>